<template>
  <div class="person_collection">
    <div class="warnBox">
      <img src="../../assets/icon/report.svg" alt="">
    </div>
    <div class="collection_top">
      <!-- <div class="person_bg" :style="'background: url('+ user_bg+')'"> -->
      <div class="person_bg">
        <img :src="user_bg" alt="">
      </div>
      <div class="userinfo flex mg-0">
        <div class="flex-1 user_info mg-0">
          <div class="user_name_header flex">
            <div class="user_img_header">
              <img class="radius-50" :src="head_url" alt="">
            </div>
            <div class="mgl-20">
              <p class="fontW-9 color-f font-36 font-f-iR">{{collectionUser}}</p>
              <p class="font-f-ib color-d6 font-16">Everything You Need to Know <br/>by <span class="color-5c9af6">{{holdAddress.substring(0, 4)}}...{{holdAddress.substring(holdAddress.length-4)}}</span></p>
            </div>
          </div>
          <div class="mgtb-20">
            <social-item :socialData="social_way"/>
          </div>
          <div class="user_name_btm flex-left-nowrap mgt-10">
            <div class="user_name_btm_item pdtb-5 flex_c_center bg-f border-r boxS-i-4">
              <div>
                <img src="../../assets/icon/like_active.svg" alt="">
              </div>
              <div class="fontW-9 color-15 font-f-iR mgt-10">76.5W</div>
            </div>
            <div class="user_name_btm_item pdtb-5 flex_c_center bg-f mgl-20 boxS-i-4 border-r">
              <div>
                <img src="../../assets/icon/share_r.svg" alt="">
              </div>
              <div class="fontW-9 color-15 font-f-iR mgt-10">76.5W</div>
            </div>
          </div>
        </div>
        <div class="user_right_box flex-c_s mg-0 flex-2">
          <div class="ov_h">
            <div class="user_desc mgt-10 float-r bg-5d border-r boxS-i-4 pd-10-15 color-f font-f-iR font-16">{{collectionDesc}}</div>
          </div>
          <div class="">
            <div class="ov_h pro_box flex-s-between">
              <div class="flex_c_center font-20 fontW-b font-f-ib bg-theme border-lb-5 boxS-i-4">
                <div>118</div>
                <div>{{$t('collection.project')}}</div>
              </div>
              <div class="flex_c_center font-20 fontW-b font-f-ib bg-theme boxS-i-4">
                <div>99</div>
                <div>{{$t('collection.owner')}}</div>
              </div>
              <div class="flex_c_center font-20 fontW-b font-f-ib bg-theme boxS-i-4">
                <div class="flex-n-center">
                  <img src="../../assets/ETH/ETH.svg"/>
                  45
                </div>
                <div>{{$t('collection.floorPrice')}}</div>
              </div>
              <div class="flex_c_center font-20 fontW-b font-f-ib bg-theme border-rt-5 boxS-i-4">
                <div class="flex-n-center">
                  <img src="../../assets/ETH/ETH.svg"/>
                  2.3K
                </div>
                <div>{{$t('collection.volume')}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="collection_btm mgt-20">
      <div class="title flex-n-center pdtb-20">
        <div @click="hundleActive(0)"
          class="titleItem text-c  font-30 fontW-b"
          :class="activeFlag === 0 ? 'theme-color': 'color-f'"
        >
          <img :src="activeFlag === 0 ? projectAcImg: projectImg" alt="">
          {{$t('collection.project')}}
        </div>
        <div @click="hundleActive(1)"
          :class="activeFlag === 1 ? 'theme-color': 'color-f'"
          class="titleItem text-c font-30 fontW-b"
        >
          <img :src="activeFlag === 1 ? activeAcImg: activeImg" alt="">
          {{$t('collection.activity')}}
        </div>
      </div>
      <div class="collection_content">
        <!-- 内容页面 -->
        <el-container v-if="activeFlag === 0">
          <el-aside :width="isCollapseFlag ? '61px' : '230px'" :class="isCollapseFlag? '':'pd-5'" class="bg-58 boxS-i-4">
            <Aside :menuList="menuList"  :isCollapse="isCollapseFlag" @getCollapseFlag="getCollapseFlag" :AsideType="AsideType"/>
          </el-aside>
          <el-main>
            <div class="searchInfo">
              <div class="search_title flex-s-between font-18">
                <div class="flex-1 mgr-10 search_input color-f font-f-iR flex boxS-i-4 bg-d3 pd-5 border-r">
                  <div class="mgr-10">
                    <img src="../../assets/icon/search.svg" alt="">
                  </div>
                  <div class="flex-1">
                    <input type="text" placeholder="search" style="padding:2px">
                  </div>
                </div>
                <drop-down class="flex-1" />
                <drop-down class="flex-1"/>
                <div class="flex">
                  <div class="flex-n-center">
                    <div @click="changeRow('4')" class="mgr-20">
                      <img :src="rowType && rowType === '4'? rownInFourAcUrl : rownInFourUrl" alt="">
                    </div>
                    <div @click="changeRow('6')" class="mgr-20">
                      <img :src="rowType && rowType === '6'? rownInSixAcUrl : rownInSixUrl" alt="">
                    </div>
                  </div>
                </div>
              </div>
              <div class="searchContent flex_w_start">
                <div class="searchItem" :style="{width: widthNum + '%', margin: '20px ' + marginNum + '%'}" v-for="item in collectionList" :key="item.id" @click="handlePersonJump(item)">
                  <collection-item :collectionData="item" :type="fromType" :pageFrom="pageFrom"/>
                </div>
              </div>
            </div>
          </el-main>
        </el-container>
        <!-- 活动 -->
        <transaction v-else :AsideType="AsideType"/>
      </div>
    </div>
  </div>
</template>
<script>
import SocialItem from '../../components/component/SocialItem'
import Aside from '../../components/component/Aside'
import DropDown from '../../components/component/Dropdown'
import CollectionItem from '../../components/component/CollectionItem'
import Transaction from '../transaction/Transaction'
import {socialWay, menuList} from '../../mock/data'

export default {
  name: 'collection',
  components: {
    SocialItem,
    Aside,
    DropDown,
    CollectionItem,
    Transaction
  },
  data () {
    return {
      fromType: 0, // 1 个人
      pageFrom: 'collection',
      user_bg: require('../../assets/img/collection.svg'),
      head_url: '',
      collectionUser: '--',
      collectionDesc: '--',
      holdAddress: '--',
      projectImg: require('../../assets/icon/project.svg'),
      projectAcImg: require('../../assets/icon/project_active.svg'),
      activeImg: require('../../assets/icon/activity.svg'),
      activeAcImg: require('../../assets/icon/activity_active.svg'),
      social_way: socialWay,
      activeFlag: 0,
      isCollapseFlag: false,
      menuList: menuList,
      collectionList: [],
      rowType: '4',
      widthNum: 18,
      marginNum: 1,
      rownInFourAcUrl: require('../../assets/icon/row_four_active.svg'),
      rownInFourUrl: require('../../assets/icon/row_four.svg'),
      rownInSixAcUrl: require('../../assets/icon/row_six_active.svg'),
      rownInSixUrl: require('../../assets/icon/row_six.svg'),
      pageSize: 20,
      page: 1,
      AsideType: 0
    }
  },
  watch: {
    isCollapseFlag (newVal, oldval) {
      if (newVal === false) {
        if (this.rowType === '4') {
          this.widthNum = 18
        } else {
          this.widthNum = 12
        }
        this.marginNum = 1
      } else {
        this.marginNum = 0.5
        if (this.rowType === '4') {
          this.widthNum = 12.5
        } else {
          this.widthNum = 10
        }
      }
    }
  },
  created () {
    console.log(this.$route.query)
    if (this.$route.query.type && this.$route.query.type === '1') { // 查看个人作品
      this.fromType = this.$route.query.type
      this.getUserInfo()
      this.getUserCollection()
    } else {
      this.getCollectionDetail()
      this.getCollectionInfo()
    }
  },
  methods: {
    hundleActive: function (type) {
      console.log(type, this.AsideType)
      this.activeFlag = type
      this.AsideType = type
    },
    getCollapseFlag: function (val) {
      this.isCollapseFlag = val
    },
    changeRow: function (type) {
      console.log(type)
      this.rowType = type
      if (!this.isCollapseFlag) {
        if (type === '4') {
          this.widthNum = 18
        } else {
          this.widthNum = 12
        }
        this.marginNum = 1
      } else {
        this.marginNum = 0.5
        if (type === '4') {
          this.widthNum = 13.2
        } else {
          this.widthNum = 10
        }
      }
    },
    // 获取个人信息
    getUserInfo: function () {
      this.$loading.show()
      this.$Api.Collection.getUsersetting()
        .then(res => {
          this.$loading.hide()
          console.log(res, 'getUsersetting', JSON.stringify(res))
          if (res && res.code === 200) {
            this.user_bg = res.data.Banner
            this.head_url = res.data.ProfileImgUrl
            if (res.data.Username !== '') {
              this.collectionUser = res.data.Username
            }
            // this.collectionUser = res.data.Username
            this.collectionDesc = res.data.Introduction
            this.holdAddress = res.data.Address
          }
        })
        .catch(err => {
          this.$loading.hide()
          console.log(err, 'getUsersetting', JSON.stringify(err))
        })
    },
    getUserCollection: function () {
      this.$loading.show()
      const params = {
        page: this.page,
        pageSize: this.pageSize
      }
      this.$Api.Works.getArtWorksList(params)
        .then(res => {
          this.$loading.hide()
          console.log(res, 'getCollection', JSON.stringify(res))
          if (res && res.code === 200) {
            const result = res.data.list
            result.forEach((item) => {
              // console.log(item)
              // 判断是否是拥有者
              if (item.asset.HoldAddress === this.$cookies.get('wallet_acount')) {
                item.asset.ownerFlag = true
              } else {
                item.asset.ownerFlag = false
              }
              // 判断是否上架作品
              if (item.makerOrder.ID === 0) {
                item.makerOrder.isSell = false
              } else {
                item.makerOrder.isSell = true
              }
            })
            this.collectionList = result
          }
        })
        .catch(err => {
          this.$loading.hide()
          console.log(err, 'getCollection', JSON.stringify(err))
        })
    },
    getCollectionInfo: function () {
      this.$loading.show()
      const params = {
        page: this.page,
        pageSize: this.pageSize,
        collectionAddress: this.$route.query.Address
      }
      this.$Api.Collection.getCollectionInfo(params)
        .then(res => {
          this.$loading.hide()
          // console.log(res, 'getCollectionInfo', JSON.stringify(res))
          if (res && res.code === 200) {
            const result = res.data.list
            // result.forEach((item, i) => {
            //   let obj = {
            //     id: i,
            //     ID: item.ID,
            //     name: item.name,
            //     img_url: item.image_url,
            //     price: '--',
            //     tokenId: item.TokenId,
            //     CollectionAddress: item.CollectionAddress
            //   }
            //   this.collectionList.push(obj)
            // })
            this.collectionList = result
          }
        })
        .catch(err => {
          this.$loading.hide()
          console.log(err, 'getCollectionInfo', JSON.stringify(err))
        })
    },
    getCollectionDetail: function () {
      this.$loading.show()
      const params = {
        id: this.$route.query.id
      }
      this.$Api.Collection.getCollectionDetail(params)
        .then(res => {
          this.$loading.hide()
          // console.log(res, 'getCollectionDetail', JSON.stringify(res))
          if (res && res.code === 200) {
            let result = res.data
            this.user_bg = result.BannerImageUrl
            this.head_url = result.ImageUrl
            this.collectionUser = result.Name
            this.collectionDesc = result.Description
            this.holdAddress = result.HoldAddress
          }
        })
        .catch(err => {
          this.$loading.hide()
          console.log(err, 'getCollectionDetail', JSON.stringify(err))
        })
    },
    handlePersonJump: function (item) {
      let _path = '/details'
      if (item.makerOrder.isSell && !item.asset.ownerFlag) {
        _path = '/buypage'
      }
      this.$router.push({
        path: _path,
        query: {artId: item.asset.ID}
      })
    }
  }
}
</script>
<style lang="less" scoped>
.person_collection {
  position: relative;
  .warnBox {
    position: absolute;
    top: 220px;
    right: 55px;
    width: 25px;
    height: 25px;
    img {
      width: 100%;
    }
  }
  .collection_top {
    .person_bg {
      width: 100%;
      height: 200px;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .userinfo {
      width: 90%;
      .user_info {
        width: 90%;
        .user_name_header {
          .user_img_header {
            img {
              width: 200px;
              height: 200px;
              margin-top: -100px;
              border: 3px solid #FFFFFF;
            }
          }
        }
        .user_name_btm {
          .user_name_btm_item {
            width: 155px;
            // height: 75px;
            img {
              width: 20px;
              height: 20px;
            }
          }
        }
      }
      .user_right_box {
        .user_desc {
          width: 90%;
          min-height: 135px;
          max-height: 200px;
          overflow-y: scroll;
          word-break: break-all;
        }
        .pro_box {
          width: 90%;
          margin: 20px 0 0 10%;
          >div {
            height: 63px;
            width: 24%;
            img {
              width: 23px;
            }
          }
        }
      }
    }
  }
  .collection_btm {
    .title {
      .titleItem {
        width: auto;
        margin-left: 20px;
        cursor: pointer;
      }
    }
    .collection_content {
      .search_input {
        input {
          background: none;
          width: 100%;
        }
      }
    }
  }
}
</style>
